<template>
  <div id="good">
    <img :src="good.goodImg" alt="" />
    <div class="center">
      <div>{{good.goodName}}</div>
      <div class="design">{{good.goodStyle}}</div>
    </div>
    <div class="right">
      <div>￥{{good.price}}</div>
      <div class="count">*{{good.count}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['good'],
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>


<style lang="stylus" scoped>
#good {
  display: flex;
  background: #f8f8fe;
  height: 1rem;
  padding: 0.1rem 0.2rem 0.1rem 0.2rem;

  img {
    width: 0.8rem;
    height: 0.8rem;
  }

  .center {
    padding-left: 0.1rem;
    color: #333;
    font-size: 0.14rem;

    .design {
      font-size: 0.12rem;
      color: #ccc;
      line-height: 0.24rem;
    }
  }

  .right {
    text-align: right;
    font-size: 0.12rem;

    .count {
      color: #ccc;
    }
  }
}
</style>
